<template>
    <page-box class="custom-page-box">
        <template v-slot:header>
            <ask-breadcrumb>
                <template v-for="(item, index) in $getBreadCrumbsName('/resource-manage/manage')">
                    <ask-breadcrumb-item :key="index" v-if="item.path" :to="'/' + item.path">{{ item.meta.title }}</ask-breadcrumb-item>
                    <ask-breadcrumb-item :key="index" v-else>{{ item.meta.title }}</ask-breadcrumb-item>
                </template>
                <ask-breadcrumb-item>设置关联项</ask-breadcrumb-item>
            </ask-breadcrumb>
        </template>
        <div class="related-items-container">
            <div class="head">
                <h3>{{ getName }}<i class="el-icon-arrow-right"></i>关联设置</h3>
                <div class="btn-box">
                    <el-button type="primary" @click="submitContact">提交</el-button>
                    <el-button @click="goBack()">取消</el-button>
                </div>
            </div>
            <div class="content">
                <div class="inner">
                    <div class="title">
                        <p>本资源关联字段</p>
                        <p>其他资源关联字段</p>
                    </div>
                    <div class="item" v-for="(item, index) in contactData" :key="item.id">
                        <span class="num">{{ index + 1 }}</span>
                        <template v-if="item.id.includes('custom')">
                            <el-cascader
                                class="first-select"
                                v-model="item.labelId"
                                :options="firstOptions"
                                :props="props"
                                size="large"></el-cascader>
                            <p class="text"></p>
                            <el-cascader
                                class="last-select"
                                v-model="item.relaLabelId"
                                :options="lastOptions"
                                :props="props"
                                size="large"></el-cascader>
                        </template>
                        <template v-else>
                            <div class="first-box" :title="item.labelTypeName + '/' + item.labelName">{{ item.labelTypeName }}/{{ item.labelName }}</div>
                            <p class="text"></p>
                            <div class="last-box" :title="item.relaLabelTypeName + '/' + item.relaLabelName">{{ item.relaLabelTypeName }}/{{item.relaLabelName}}</div>
                        </template>
                        <div class="opera-btn-box">
                            <div class="opera-btn" @click="addItem(index)">
                                <i class="el-icon-plus"></i><span>添加</span>
                            </div>
                            <div class="opera-btn" @click="delItem(index, item)">
                                <i class="el-icon-delete-solid"></i><span>删除</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </page-box>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

@Component({
    name: 'RelatedItemsNotAlive'
})
export default class RelatedItems extends Vue {
    get getId() {
        return this.$route.query.id || '';
    }

    get getName() {
        return this.$route.query.name || '';
    }

    contactData: any = [{
        id: 'custom1',
        labelId: [],
        relaLabelId: []
    }]

    firstOptions: any = []
    lastOptions: any = []
    deleteId: any = []

    get props() {
        return {
            value: "id",
            label: "name",
            lazy: true,
            lazyLoad: async(node: any, resolve: any) => {
                if (!node.children || node.children.length) {
                    resolve([]);
                } else {
                    const res: any = await this.getFormOptions(node);
                    resolve(res);
                }
            }
        };
    }

    created() {
        console.log(11);
        this.getDefaultValue();
        this.getOptions();
    }

    addItem(index: number) {
        this.contactData.splice(index + 1, 0, {
            id: 'custom' + new Date().getTime(),
            labelId: [],
            relaLabelId: []
        });
    }

    delItem(index: number, item: any) {
        this.contactData.splice(index, 1);
        if (!item.id.includes('custom')) {
            this.deleteId.push(item.id);
        }
        if (!this.contactData.length) {
            this.contactData = [{
                id: 'custom1',
                labelId: [],
                relaLabelId: []
            }];
        }
    }

    async getDefaultValue() {
        this.contactData = [{
            id: 'custom1',
            labelId: [],
            relaLabelId: []
        }];
        const res = await this.$server["label/relation/list"]({
            data: {
                secondTypeId: this.getId
            }
        });
        if (res.data.code === 200) {
            if (res.data.data.length) {
                this.contactData = res.data.data;
            } else {
                this.contactData = res.data.data.concat([], this.contactData);
            }
        } else {
            this.$message.error(res.data.message || "接口请求错误!");
        }
    }

    async getOptions() {
        const res = await this.$server["business/config/tree"]({
            data: {}
        });
        if (res.data.code === 200) {
            this.lastOptions = res.data.data[0].children;
            res.data.data[0].children.forEach((item: any) => {
                if (item.children) {
                    if (item.children.filter((it: any) => it.id === this.getId).length) {
                        this.firstOptions = item.children.filter((it: any) => it.id === this.getId)[0].children;
                    }
                }
            });
        } else {
            this.$message.error(res.data.message || "接口请求错误!");
        }
    }

    async getFormOptions(node?: any) {
        if (node) {
            let nodes: any[] = [];
            const res = await this.$server["business/getTable"]({
                data: {
                    keyword: "",
                    valueKindId: "",
                    pageSize: 99999,
                    currentPage: 1,
                    typeId: node.data.id
                }
            });
            if (res.data.code === 200) {
                const list = res.data.data.records.filter((item: any) => !['4', '5', '8', '9', '10'].includes(item.valueKindId)).map((item: any) => {
                    return {
                        id: item.id,
                        name: item.name,
                        leaf: true
                    };
                });
                nodes = nodes.concat([], list);
            } else {
                this.$message.error(res.data.message || "接口请求错误!");
            }
            return nodes;
        }
    }

    async submitContact() {
        let isNot = false;
        const relaList = this.contactData.map((item: any) => {
            if ((!item.labelId.length && !item.labelId.length) || !item.id.includes('custom')) {
                return '';
            } else if ((!item.labelId.length || !item.labelId.length) && !isNot) {
                isNot = true;
            }
            return {
                labelId: item.labelId[item.labelId.length - 1],
                relaLabelId: item.relaLabelId[item.relaLabelId.length - 1]
            };
        }).filter((item: any) => item);
        if (isNot) {
            return this.$message.error('关联内容不允许为空，请选择后再保存');
        }
        if (!relaList.length && !this.deleteId.length) {
            return false;
        }
        const res = await this.$server["label/relation/save"]({
            data: {
                deleteIds: this.deleteId,
                relaList: relaList.filter((item: any) => item),
                secondTypeId: this.getId
            }
        });
        if (res.data.code === 200) {
            this.getDefaultValue();
            this.$message.success(res.data.message);
        } else {
            this.$message.error(res.data.message || "接口请求错误!");
        }
    }

    goBack() {
        this.$router.go(-1);
    }
}
</script>

<style lang="scss" scoped>
::v-deep {
    .page-base-body {
        height: calc(100% - 50px)!important;
    }
}
.related-items-container {
    padding: 10px;
    height: 100%;
    overflow-y: auto;
    .head {
        height: 50px;
        @include flexLayout(flex,justify,center);
        margin-bottom: 10px;
        background: #fff;
        padding: 0 18px;
        h3 {
            font-size: 16px;
            font-weight: 500;
            line-height: 22px;
            color: #37383A;
            .el-icon-arrow-right {
                font-weight: bold;
            }
        }
    }
    .content {
        background: #fff;
        height: calc(100% - 60px);
        overflow-y: auto;
        overflow-x: auto;
        .inner {
            width: 1100px;
            margin: 0 auto;
        }
        .title {
            @include flexLayout(flex,normal,center);
            margin-left: 64px;
            padding-top: 40px;
            margin-bottom: 18px;
            p {
                width: 400px;
                font-size: 16px;
                font-weight: 500;
                line-height: 22px;
                color: #37383A;
                margin: 0;
                &:first-child {
                    width: 350px;
                    margin-right: 120px;
                }
            }
        }
        .item {
            width: 100%;
            @include flexLayout(flex,normal,center);
            margin-bottom: 40px;
            .num {
                display: inline-block;
                width: 44px;
                height: 44px;
                background: #DE2728;
                line-height: 36px;
                border: 4px solid #FFE3E3;
                border-radius: 22px;
                text-align: center;
                font-size: 20px;
                font-weight: bold;
                color: #FFFFFF;
                margin-right: 20px;
            }
            .text {
                height: 4px;
                background: #C7CAD3;
                width: 60px;
                margin: 0 30px;
            }
            .opera-btn-box {
                border: 1px solid #C7CAD3;
                border-left: 0;
                width: 130px;
                height: 40px;
                border-top-right-radius: 4px;
                border-bottom-right-radius: 4px;
                @include flexLayout(flex,justify,center);
                padding: 0 10px;
                .opera-btn {
                    cursor: pointer;
                    @include flexLayout(flex,normal,center);
                    span {
                        font-size: 16px;
                        color: #DE2728;
                    }
                    .el-icon-plus {
                        font-size: 8px;
                        color: #2C82C9;
                        margin-right: 4px;
                    }
                    .el-icon-delete-solid {
                        font-size: 8px;
                        color: #DE2728;
                        margin-right: 4px;
                    }
                    &:first-child {
                        span {
                            color: #2C82C9;
                        }
                    }
                }
            }
            .first-select {
                width: 350px;
                ::v-deep {
                    .el-input__inner {
                        border-color: #C7CAD3;
                    }
                }
            }
            .last-select {
                width: 440px;
                ::v-deep {
                    .el-input__inner {
                        border-top-right-radius: 0;
                        border-bottom-right-radius: 0;
                        border-color: #C7CAD3;
                    }
                }
            }
            .first-box {
                width: 350px;
                height: 40px;
                line-height: 40px;
                border-radius: 4px;
                border: 1px solid #C7CAD3;
                font-size: 14px;
                padding-left: 15px;
                color: #37383A;
                @include textEllipsis()
            }
            .last-box {
                width: 440px;
                height: 40px;
                line-height: 40px;
                color: #37383A;
                border-radius: 4px;
                border: 1px solid #C7CAD3;
                font-size: 14px;
                padding-left: 15px;
                border-top-right-radius: 0;
                border-bottom-right-radius: 0;
                @include textEllipsis()
            }
        }
    }
}
</style>
